<template>
    <ComPageList ref="ComPageList" :pageParamAll="pageParamAll"></ComPageList>
</template>
<script>
export default {
    data(){
        return {
          pageParamAll:{}
        }
    },
    created(){
        this.initPageParam();
        this.initForm();
    },
    methods:{
        validateUserName:(rule, value, callback) => {
          var reg = /^[0-9A-Za-z/]{1,32}$/ //8-16位且同时包含数字和字母
          if (value === '') {
            callback(new Error('请输入管理员名称'))
          } else if (!reg.test(value)) {
            callback(new Error('管理员名称由32位以内的数字、大小写字母组成!'))
          } else {
            callback()
          }
        },
        initForm:function(){
            var that = this ;
            var validateUserName = (rule, value, callback) => {
                var reg = /^[0-9A-Za-z/]{1,16}$/ //8-16位且同时包含数字和字母
                if (value === '') {
                    callback(new Error('请输入账号'))
                } else if (!reg.test(value)) {
                    callback(new Error('账号由16位以内的数字、大小写字母组成!'))
                } else {
                    callback()
                }
            }
            var validatePass = (rule, value, callback) => {
                var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z~!@#$%^&*()_+`\-={}:";'<>?,./]{8,16}$/ //8-16位且同时包含数字和字母
                console.log('reg.test(value)', value, !reg.test(value))
                if (value === '') {
                    callback(new Error('请输入密码'))
                } else if (!reg.test(value)) {
                    callback(new Error('密码由8-16位且同时包含数字和字母组成!'))
                } else {
                    callback()
                }
            }
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'))
                // } else if (value !== this.dataForm.password) {
                } else if (value !== this.$refs.ComPageList.$refs.form.form.password) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            this.pageParamAll.formDesign = {
                    // asterisk:true,
                    formItems : [
                        {
                            prop:'accountName',
                            label:'姓名',
                            type:'input',
                            disabledItem:["绑定角色"]
                        },
                        {
                            prop:'username',
                            label:'账号',
                            type:'input',
                            disabledItem:["编辑","绑定角色"]
                        },
                        {
                            prop:'password',
                            label:'密码',
                            type:'input',
                            password:true,
                            vIf:"添加",
                        },
                        {
                            prop:'newPassword2',
                            label:'确认密码',
                            type:'input',
                            password:true,
                            vIf:"添加",
                        },
                        {
                            prop:'selectRoles',
                            label:'角色',
                            type:'select',
                            multiple:true,
                            url:"/role/list",
                            params:{"accountId":""},//下拉框接口传参的字段
                            optionLable:{"lable":"name","value":"id"},//下拉框接口返回的字段名称转换
                            method:"get",
                            vIf:"绑定角色",
                        },
                    ],
                     rules: {
                      accountName: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
                        username: [
                        { required: true, message: '账号不能为空', trigger: 'blur' },
                        { validator: validateUserName, trigger: 'blur' }
                        ],
                        password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' },
                        { validator: validatePass, trigger: 'blur' }
                        ],
                        newPassword2: [
                        { required: true, message: '确认密码不能为空', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' }
                        ]
                    },
                };
            this.pageParamAll.btns=[{
                    name: "保存",
                    type: '',
                    icon: 'el-icon-edit',
                    click: function () {
                        that.$refs.ComPageList.saveForm();
                    }
                }]
        },
        initPageParam : function(){
            var that = this ;
            this.pageParamAll.pageParam = {
                isPagination:true,//是否分页
                isQualitySearch:false,//是否高级查询
                // searchParam : {
                //     placeholder:'请输入角色名称',
                //     maxlength:50,
                // },
                searchParam : [
                {
                    placeholder:'请输入账号\姓名',
                    maxlength:50,
                    prop : "keyword",
                    label : "账号\姓名",
                },
                ],
                conditions:this.conditions,//高级查询项
                btns : [
                    {
                        name:'新增',
                        type:'primary',
                        icon:'el-icon-circle-plus-outline',
                        click:function(){
                            that.$refs.ComPageList.viewForm(null);
                        }
                    },{
                        name:this.$t('common.batchDelete'),
                        type:'danger',
                        icon:'el-icon-delete',
                        click:function(){
                            that.$refs.ComPageList.deleteAll();
                        }
                    }
                ],
                tableParam : {//表单参数
                    border:true,//是否有边框
                    script:true,
                    highlightCurrentRow:true,//单行选择
                    maxHeight:"1500",//最大高度
                    multi:false,//是否为多选
                    columns:[
                    {
                        prop : "index",
                        label : "序号",
                        // fixed : 'left',
                    },
                    {
                        prop : "accountId",
                        label : "ID",
                    },
                    {
                        prop : "username",
                        label : "账号",
                    },
                    {
                        prop : "accountName",
                        label : "姓名",
                    },{
                        prop:"",
                        label:"角色",
                        FormData:"selectRoles",
                    },{
                        prop : "",
                        label : "操作",
                        width : "20",
                        sortable:'',
                        // fixedDirect:'right',
                        opers:[
                            {
                                name:"编辑",
                                type:'',
                                icon:'el-icon-edit',
                                disabled:["accountId","1"],
                                click:function(row){
                                    that.$refs.ComPageList.viewForm(row,"编辑");
                                }
                            }, {
                                name:'删除',
                                type:'danger',
                                icon:'el-icon-delete',
                                disabled:["accountId","1"],
                                click:function(row){
                                    that.$refs.ComPageList.delete(row);
                                }
                            }
                            , {
                                name:'绑定角色',
                                icon:'',
                                disabled:["accountId","1"],
                                click:function(row){
                                    that.$refs.ComPageList.viewForm(row,"绑定角色");
                                }
                            }
                        ]
                    }],
                },
                initData:{
                    url:'/account/page',
                    params:{
                        "pageSize":10,
                        "pageNum":1,
                        "entity":{}
                    },
                    addUrl:{
                      url:"/account/",
                      methods:'post',
                    },
                    updateUrl:{
                      url:"/account/",
                      methods:'put',
                    },
                    delUrl:{
                      url:"/account/",
                      methods:'put',
                    },
                    bindUrl:{
                      url:"/permission/account-role/bind",
                      methods:'post',
                    },
                    actionName:"管理员",
                    pagination:{
                      "pageSize":10,
                      "pageNum":1,
                      "total":0,
                    }
                },
            }
        },
    }

}


</script>
<style scoped>




</style>





























